<template>
  <el-select
    v-model="model"
    :remote-method="queryList"
    :loading="loading"
    :placeholder="$t('common.pla.pleaseSelect')"
    :multiple="multiple"
    :disabled="disabled"
    :multiple-limit="multipleLimit"
    :size="size"
    :value-key="valueKey"
    :filterable="filterable"
    remote
    reserve-keyword
    :style="style"
    @change="handleChange"
  >
    <el-option
      v-for="item in dataList"
      :key="item.studentId"
      :label="item.name + '('+item.studentId+')'"
      :value="getValue(item)"
    >
    </el-option>
  </el-select>
</template>
<script>
import { findStuInfoListForSelect } from 'common/src/api/studentinfo'
import UTILS from 'common/src/utils/utils'
/**
 * 学生模糊匹配多选下拉框组件
 */
export default {
  name: "StudentSelect",
  model: {
    prop: 'model',
    event: 'change'
  },
  props: {
    model: {
      default: null,
      validator: function (value) {
        // v-model不能为null
        const valide = (value !== null && value !== undefined);
        if(!valide) {
          console.warn('v-model不能为null')
        }
        return valide;
      }
    },// 父组件通过v-model传过来, 如果传来的值为null为出现 Cannot read property 'some' of null
    valueKey: {
      type: String,
      default: 'studentId'
    },
    value: null,
    multiple: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: ''
    },
    multipleLimit: {
      type: Number,
      default: 0
    },
    conditionNotNull: { // 如果为false则会在查询条件有值时才查询数据
      type: Boolean,
      default: true
    },
    condition: {
      type: Object,
      default: null
    },
    style:{
      type:Object,
      default: {width: '100%'}
    },
    showMask: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dataList: [],
      loading: false,
    }
  },
  mounted() {
    this.init();
  },
  created() {
  },
  watch: {
    condition: {
      deep:true,
      handler: function(newVal, oldVal) {
        this.init();
      }
    }
  },
  methods: {
    handleChange(val){
      this.$emit('change', val);
    },
    getValue(item){
      if(UTILS.isEmpty(this.value)) {
        return item;
      }
      return item[this.value];
    },
    init(){
      if(this.conditionNotNull && UTILS.isEmpty(this.condition)) {
        return;
      }
      let queryData = UTILS.clone(this.condition == null ? {} : this.condition);
      if(_.isNull(queryData.pageSize_) || _.isUndefined(queryData.pageSize_)) {
        queryData.pageSize_ = 50;
      }
      if(_.isNull(queryData.pageNum_) || _.isUndefined(queryData.pageNum_)) {
        queryData.pageNum_ = 1;
      }
      findStuInfoListForSelect(queryData, this.showMask).then(res => {
        this.loading = false
        this.dataList = res.data.list;
        this.$emit('load-done', this.dataList);
      });
    },
    queryList(query) {
      if (query !== '') {
        this.loading = true
        if(UTILS.isEmpty(this.condition)) {
           this.condition = {};
        }
        this.condition['name'] = query;
        this.init();
      }
    }
  }
};

</script>

<style scoped>
</style>
